Component({
    options: {
      multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    properties: {
      extClass: {
        type: String,
        value: ''
      },
      title: {
        type: String,
        value: ''
      },
      background: {
        type: String,
        value: '#fff'
      },
      color: {
        type: String,
        value: '#000'
      },
      back: {
        type: Boolean,
        value: true
      },
      loading: {
        type: Boolean,
        value: false
      },
      animated: {
        // 显示隐藏的时候opacity动画效果
        type: Boolean,
        value: true
      },
      show: {
        // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
        type: Boolean,
        value: true,
        observer: '_showChange'
      },
      // back为true的时候，返回的页面深度
      delta: {
        type: Number,
        value: 1
      }
    },
    /**
     * 组件的初始数据
     */
    data: {
      displayStyle: '',
      statusBarHeight: 20
    },
    attached() {
      // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      const rect = wx.getMenuButtonBoundingClientRect()
      console.log('右上角胶囊按钮）布局', rect);
      wx.getSystemInfo({
        success: (res) => {
          this.setData({
            innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,
            leftWidth: `width:${res.windowWidth - rect.left}px`,
            // navBarHeight: rect.bottom + rect.top  - res.statusBarHeight,  //84px
            navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, //40px
            // navBarHeight: rect.height + (rect.top - res.statusBarHeight) * 2, //40px
            statusBarHeight: res.statusBarHeight //44px
          })
        }
      })

      // const res = wx.getWindowInfo()
      // this.setData({
      //   innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,
      //   leftWidth: `width:${res.windowWidth - rect.left}px`,
      //   // navBarHeight: rect.bottom + rect.top  - res.statusBarHeight,  //84px
      //   navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, //40px
      //   statusBarHeight: res.statusBarHeight //44px
      // })
    },
    /**
     * 组件的方法列表
     */
    methods: {
      _showChange(show) {
        const animated = this.data.animated
        let displayStyle = ''
        if (animated) {
          displayStyle = `opacity: ${show ? '1' : '0'};transition: opacity 0.5s;`
        } else {
          displayStyle = `display: ${show ? '' : 'none'}`
        }
        this.setData({
          displayStyle
        })
      },
      back() {
        const data = this.data
        if (data.delta) {
          wx.navigateBack({
            delta: data.delta
          })
        }
        this.triggerEvent('back', { delta: data.delta }, {})
      }
    }
  })
  